<template>
  <div>

    <el-container>
      <!--<el-header></el-header>-->
      <el-main>
        <el-row>
          <el-col :span="18">
            <el-button type="primary" @click="newsubject">新增分类</el-button></el-col>
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="searchcategory" class="input-with-select" @input ="searchange" >
              <el-button @click="mysearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <br>
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            width="40">
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="分类名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="myclick(scope.row)" type="text" size="small">编辑</el-button>
              <template v-if="roles === 'superadmin' ">
                <el-button @click="mydelete(scope.row)" type="text" size="small">删除</el-button>
              </template>
              <template v-else>
                <el-button @click="mydelete(scope.row)" type="text" size="small" disabled>删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <el-row>
          <el-col :span="8"><p></p></el-col>
          <el-col :span="8">
            <el-pagination
              @current-change="currentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="page_size"
              :current-page="current_page"
            >
            </el-pagination>
          </el-col>
          <el-col :span="8"><p></p></el-col>
        </el-row>
        <el-dialog title="编辑分类信息" :visible.sync="dialogFormVisible" @close="dialogcolse" width="40%" center>
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm" :label-position="labelPosition">
            <el-form-item label="请输入分类名称" prop="name">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('form')">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>

</template>

<script>
    import store from '../../store'
    import { getcategory, deletecategory, patchcategory, postnewcategory } from '@/api/course'
    export default {
      name: 'couserclassmanager',
      data() {
        return {
          roles: store.getters.roles[0],
          tableData: [],
          searchcategory: '',
          dialogFormVisible: false,
          labelPosition: 'left',
          form: {
            name: '',
            id: 0
          },
          page_size: 20,
          total: 100,
          current_page: 1,
          use: 0,
          rules: {
            name: [
              { required: true, message: '请输入分类名称', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        getcategoryinfo(page, keyword, page_size) {
          getcategory(page, keyword, page_size).then(response => {
            const data = response.data
            this.tableData = data
            this.total = response.data_count
          }).catch(error => {
            console.log(error)
          })
        },
        currentChange(val) {
          this.current_page = val
          this.getcategoryinfo(this.current_page, this.searchcategory)
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if (this.use === 1) {
                patchcategory(this.form.id, this.form.name).then(response => {
                  const data = response.data
                  console.log(data)
                  this.$message({
                    type: 'success',
                    message: '编辑成功 '
                  })
                  this.dialogFormVisible = false
                  this.getcategoryinfo(this.current_page)
                }).catch(error => {
                  console.log(error)
                })
              } else {
                postnewcategory(this.form.name).then(response => {
                  const data = response.data
                  console.log(data)
                  this.$message({
                    message: '新增成功！',
                    type: 'success'
                  })
                  this.dialogFormVisible = false
                  this.getcategoryinfo(this.current_page)
                }).catch(error => {
                  console.log(error)
                })
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },
        clearFormdata(){
          this.form = {
            name: '',
            id: 0
          }
        },
        resetForm(formName) {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
          this.dialogFormVisible = false
          // this.$refs[formName].resetFields()
          this.clearFormdata()
        },
        dialogcolse() {
          // this.$refs['form'].resetFields()
          this.clearFormdata()
        },
        myclick(row) {
          this.use = 1
          this.form.id = row.id
          this.form.name = row.name
          this.dialogFormVisible = true
        },
        newsubject() {
          this.use = 0
          this.form.name = ''
          this.dialogFormVisible = true
        },
        mydelete(row) {
          this.$confirm('是否确认删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            var id = row.id
            deletecategory(id).then(response => {
              const data = response.data
              console.log(data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              var data_len = this.tableData.length
              var is_jump = false
              if (data_len === 1) {
                is_jump = true
              } else {
                is_jump = false
              }
              if (this.current_page === 1) {
                this.getcategoryinfo()
              } else {
                if (is_jump) {
                  this.getcategoryinfo(this.current_page - 1)
                } else {
                  this.getcategoryinfo(this.current_page)
                }
              }
            }).catch(error => {
              console.log(error)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        mysearch() {
          this.current_page = 1
          this.getcategoryinfo(1, this.searchcategory, this.page_size)
        },
        searchange() {
          this.current_page = 1
          this.getcategoryinfo(1, this.searchcategory, this.page_size)
        }
      },
      created: function() {
        this.getcategoryinfo(this.current_page, '', this.page_size)
      }
    }
</script>

<style scoped>

</style>
